const path = require('path');
// 自动生成HTML文件，所有的 bundle 会自动添加到 html 中。
const HtmlWebpackPlugin  = require('html-webpack-plugin')
// 清理dist插件
const  { CleanWebpackPlugin }  = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	// 入口文件
	entry: {
		app: './src/index.js',
		// another: './src/another-module.js'
	},
	devtool: 'inline-source-map',
	devServer:{
		contentBase: './dist',
		hot: true
	},
	plugins: [
		new HtmlWebpackPlugin({
			title:'Output Management'
		}),
		new CleanWebpackPlugin(),
		// new webpack.NamedMoudlesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
	],
	module: {
		rules:[
			{
			 test:/\.css$/,
			 use: ['style-loader','css-loader']
		  }
		]
	},
	// 将公用的chunk提取出来
	// optimization: {
	// 	splitChunks: {
	// 		chunks: 'all'
	// 	}
	// },
	// 出口文件
	output: {
		// filename: 'bundle.js',
		filename:'[name].bundle.js',
		chunkFilename:'[name].bundle.js',
		// 输出文件为当前目录的dist文件
		path: path.resolve(__dirname, 'dist'),
		publicPath: '/'
	},
}